<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ZRender</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZRender">
    <meta name="author" content="kener.linfeng@gmail.com">

    <script src="../asset/js/esl/esl.js"></script>
    <link href="../asset/css/bootstrap.css" rel="stylesheet">
    <link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="../asset/css/zrenderHome.css" rel="stylesheet">
    <link rel="shortcut icon" href="../asset/ico/favicon.png">
</head>

<body>
    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="../../index.html">ZRender</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/zrender">View on GitHub</a>
              <ul class="nav">
                <li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="active dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Example <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="demo.html">Demo</a></li>
                    <li><a href="animation.html">Animation</a></li>
                    <li><a href="chart.html">Chart</a></li>
                    <li><a href="colorSeries.html">Color Series</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="artist.html">Artist</a></li>
                    <li class="active"><a href="slice.html">slice</a></li>
                  </ul>
                </li>
                <li><a href="../api/index.html" target="_blank">API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe/zrender/archive/2.1.0.zip">ZIP (2.1.0)</a></li>
                    <li><a href="https://github.com/ecomfe/zrender/archive/master.zip">ZIP (Latest)</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://echarts.baidu.com" target="_blank">ECharts</a></li>
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="main" class="main"></div>
                <button id="start">start ~</button>
                <span id='wrong-message' style="color:red"></span>
            </div>
        </div><!--/row-->
        <hr>
        <!-- FOOTER -->
        <footer>
          <p class="pull-right"><a href="#">Back to top</a></p>
          <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/zrender/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>
        </footer>
    </div><!--/.fluid-container-->

    <script src="../asset/js/jquery.js"></script>
    <script src="../asset/js/bootstrap-transition.js"></script>
    <script src="../asset/js/bootstrap-alert.js"></script>
    <script src="../asset/js/bootstrap-modal.js"></script>
    <script src="../asset/js/bootstrap-dropdown.js"></script>
    <script src="../asset/js/bootstrap-scrollspy.js"></script>
    <script src="../asset/js/bootstrap-tab.js"></script>
    <script src="../asset/js/bootstrap-tooltip.js"></script>
    <script src="../asset/js/bootstrap-popover.js"></script>
    <script src="../asset/js/bootstrap-button.js"></script>
    <script src="../asset/js/bootstrap-collapse.js"></script>
    <script src="../asset/js/bootstrap-carousel.js"></script>
    <script src="../asset/js/bootstrap-typeahead.js"></script>
    <script type="text/javascript">
        var developMode = false;
        if (developMode) {
            // for develop
            require.config({
                packages: [
                    {
                        name: 'zrender',
                        location: '../../src',
                        main: 'zrender'
                    }
                ]
            });
        }
        else {
            // for echarts online home page
            var fileLocation = './www/js/zrender';
            require.config({
                paths:{ 
                    zrender: fileLocation,
                    'zrender/shape/Circle': fileLocation,
                    'zrender/shape/Text': fileLocation,
                    'zrender/shape/Polyline': fileLocation
                }
            });
        };

        require(
            ['zrender', 'zrender/shape/Circle', 'zrender/shape/Text', 'zrender/shape/Polyline'],
            function(zrender, CircleShape, TextShape, PolylineShape) {
                zr = zrender.init(document.getElementById('main'));
                var width = Math.ceil(zr.getWidth());
                var height = Math.ceil(zr.getHeight());
                var util = require('zrender/tool/util');
                var eventTool = require('zrender/tool/event');
                var gameRunning;
                var shapeList = [];
                var pointText;
                var knife;
                var hasCatched = {};
                var gamTicket;
                var timeTicket;
                var gameTime = 10;

                document.getElementById('start').onclick = init;

                function init(){
                    document.getElementById('wrong-message').innerHTML = '';
                    zr.clear();
                    gameRunning = true;
                    _bulidTime();
                    _startGame();
                }

                function _getRandomColor(opacity) {
                    return 'rgba('
                            + Math.round(Math.random() * 256) + ','
                            + Math.round(Math.random() * 256) + ','
                            + Math.round(Math.random() * 256) + ', ' + opacity + ')'
                }

                function _bulidTime() {
                    shapeList = [];
                    shapeList.push(new CircleShape({
                        rotation : [0, 100, 100],
                        style : {
                            x : 100,
                            y : 100,
                            r : 100,
                            color : _getRandomColor(0.8),
                            text : gameTime,
                            textPosition:'inside',
                            textFont : 'bold 60px "Times New Roman"'
                        },
                        hoverable : false,
                        _round : 2
                    }));
                    shapeList.push(new CircleShape({
                        rotation : [0, 170, 200],
                        style : {
                            x : 170,
                            y : 200,
                            r : 20,
                            color : _getRandomColor(0.7),
                            text : '--+--',
                            textPosition:'inside'
                        },
                        _round : 10,
                        hoverable : false
                    }));
                    shapeList.push(new CircleShape({
                        rotation : [0, 130, 260],
                        style : {
                            x : 130,
                            y : 260,
                            r : 50,
                            color : _getRandomColor(0.6),
                            text : '------+------',
                            textPosition:'inside'
                        },
                        hoverable : false,
                        _round : 4
                    }));

                    for(var i = 0, l = shapeList.length; i < l; i++) {
                        zr.addShape(shapeList[i]);
                    }

                    pointText = new TextShape({
                        scale : [1, 1, 100, height-40],
                        style : {
                            x : 100,
                            y : height - 40,
                            text : '0',
                            color : 'rgba(220, 20, 60, 0.6)',
                            textFont : 'bold 30px "Times New Roman"',
                            textAlign : 'center'
                        }
                    });
                    zr.addShape(pointText);
                    knife = new PolylineShape({
                        shape : 'polyline',
                        zlevel : 1, // 频繁变动的画笔单独在一层中
                        style : {
                            pointList : [
                                [width / 2, height / 2],
                                [width / 2, height / 2],
                                [width / 2, height / 2],
                                [width / 2, height / 2],
                                [width / 2, height / 2],
                                [width / 2, height / 2],
                                [width / 2, height / 2],
                                [width / 2, height / 2]
                            ],
                            strokeColor : _getRandomColor(0.6),
                            lineWidth : Math.round(Math.random() * 5)
                        },
                        hoverable : false   // default true
                    });

                    zr.addShape(knife);
                    zr.render();
                    zr.on(
                        'mousemove',
                        function(params) {
                            if (gameRunning) {
                                knife.style.pointList.push([
                                    eventTool.getX(params.event),
                                    eventTool.getY(params.event)
                                ]);
                                knife.style.strokeColor = _getRandomColor(0.6);
                                knife.style.lineWidth = Math.round(Math.random() * 5);
                                knife.style.pointList.shift();
                                zr.modShape(knife.id, knife);
                                zr.refresh();
                            }
                        }
                    );
                }

                function _startGame() {
                    zr.modShape(pointText.id, {
                        style : {
                            text : '0'
                        }
                    });
                    clearInterval(gamTicket);
                    gamTicket = setInterval(function(){
                        var sizePoint = Math.ceil(Math.random() * 40);
                        var bubble = new CircleShape({
                            shape : 'circle',
                            style : {
                                x : Math.ceil(Math.random() * (width - 320) + 300),
                                y : height -40,
                                r : sizePoint,
                                burshType : 'both',
                                color : _getRandomColor(0.6),
                                strokeColor : _getRandomColor(0.4),
                                text : 50 - sizePoint,
                                textPosition : 'inside'
                            },
                            _ticket :require('zrender/tool/guid')(),
                            _point : 50 - sizePoint,
                            hoverable : false,
                            clickable : true,
                            onmouseover : function(params){
                                if (hasCatched[params.target._ticket]) {
                                    return;
                                }
                                hasCatched[params.target._ticket] = true;
                                zr.modShape(
                                    params.target.id,
                                    {style : { brushType : 'stroke'}}
                                );
                                zr.animate(params.target.id, 'style')
                                    .when(300, {
                                        r : 1000
                                    })
                                    .start();
                                zr.modShape(
                                    pointText.id,
                                    {
                                        style : {
                                            text : pointText.style.text - 0 + params.target._point
                                        }
                                    }
                                );
                                var s = pointText.scale;
                                s[0] = s[0] + 0.1;
                                s[1] = s[0];
                                zr.animate(pointText.id)
                                    .when(500, {
                                        scale : s
                                    })
                                    .start();
                                var newShape = util.clone(params.target);
                                newShape.id = require('zrender/tool/guid')();
                                newShape.style.brushType = 'fill';
                                zr.addShape(new CircleShape(newShape));
                                zr.animate(newShape.id, 'style')
                                    .when(1000, {
                                        y : height - newShape.style.r
                                    })
                                    .start('BounceOut');
                            }
                        });
                        zr.addShape(bubble);
                        zr.animate(bubble.id, 'style')
                            .when(3000, {
                                y : -120
                            })
                            .done(function(){
                                zr.delShape(bubble.id);
                            })
                            .start('QuadraticInOut');
                    }, 200);

                    clearInterval(timeTicket);
                    timeTicket = setInterval(function(){
                        zr.modShape(
                            shapeList[0].id,
                            {
                                style: {
                                    color : _getRandomColor(0.8),
                                    text: shapeList[0].style.text - 1
                                }
                            }
                        );
                        if (shapeList[0].style.text == '0') {
                            zr.modShape(
                                shapeList[0].id,
                                {style:
                                    {
                                        text: 'Game over',
                                        textFont : 'bold 30px "Times New Roman"'
                                    }
                                }
                            );
                            clearInterval(gamTicket);
                            clearInterval(timeTicket);
                            gameRunning = false;
                            zr.modShape(knife.id, {
                                style : {
                                    strokeColor : 'rgba(0, 0, 0, 0)'
                                }
                            });
                        }
                        zr.refresh();
                    },1000)

                    for(var i = 0, l = shapeList.length; i < l; i++) {
                        zr.animate( shapeList[i].id )
                            .when(gameTime * 1000 + 100, {
                                rotation : [
                                    (i%2 == 0 ? 1 : -1) * Math.PI * shapeList[i]._round,
                                    shapeList[i].rotation[1],
                                    shapeList[i].rotation[2]]
                            })
                            .start();
                    }
                }
                _bulidTime();
            }
        )
    </script>
</body>
</html>